
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./turf.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        const colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
        const breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 99] // 等值面的级数

        axios.get('./windpoint.json')
            .then((response) => {
                showWindLine(response.data.data)
            })

        function showWindLine(arr) {
            const pointGrid = []
            for (let i = 0, len = arr.length; i < len; i++) {
                const item = arr[i]

                pointGrid.push({
                    type: "Feature",
                    properties: item,
                    geometry: {
                        type: "Point",
                        coordinates: [item.x, item.y]
                    }
                })
            }

            const points = {
                type: "FeatureCollection",
                features: pointGrid
            }

            // 等值面
            const geojsonPoly = turf.isobands(points, breaks, {
                zProperty: "speed"
            })
            var promise = Cesium.GeoJsonDataSource.load(geojsonPoly, {
                clampToGround: true,   
            });
            promise.then(function (dataSource) {
                viewer.dataSources.add(dataSource);
                var entities = dataSource.entities.values;
                for (var o = 0; o < entities.length; o++) {
                    var r = entities[o];
                    const val = Number(r._properties.speed._value.split("-")[0] || 0)
                    const color = getColor(val)
                    r.polygon.material = Cesium.Color.fromCssColorString(color) 
                }
            });

            // 等值线
            const geojsonLine = turf.isolines(points, breaks, {
                zProperty: "speed"
            })

            var promise1 = Cesium.GeoJsonDataSource.load(geojsonLine, {
                clampToGround: true,   
            });
            promise1.then(function (dataSource) {
                viewer.dataSources.add(dataSource);
                var entities = dataSource.entities.values;
                for (var o = 0; o < entities.length; o++) {
                    var r = entities[o];
                    r.polyline.material =  Cesium.Color.fromCssColorString("#000000") 
                }
            });

        }

        function getColor(value) {
            for (let i = 0; i < breaks.length; i++) {
                if (breaks[i] === value) {
                    return colors[i]
                }
            }
            return colors[0]
        }


        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(100, 30, 4025692.0)
        });
    </script>
</body>

</html>